<template>  
    <div class='goodsSku'> 
        <!-- 弹窗里的内容部分  -->
        <div v-transfer-dom>
            <popup v-model='popupState' :hide-on-blur=false>
                <div style="height:20rem;background:white;">
                    <!-- 价格区 starts  -->
                    <div class="relative height5 grayBoderBottomeaeaea flex-box overflowHidden paddingTopPer5 paddingBottomPer5 paddingLeftPer5 paddingRightPer5 bottom0">
                        <div class="floatLeft width3_75">
                        <img v-bind:src='(selectedSaleAttrOne != null && selectedSaleAttrOne.imageUrl300)?selectedSaleAttrOne.imageUrl300:goodsSkuData.productUrl300' alt="">
                        </div>
                        <div class="paddingLeft0_3">
                            <p class="overEllipsis fontSize0_8 overflowHidden marginTop0_3 width10">{{goodsSkuData.productName}}</p>
                            <!-- 商品价格  -->
                            <p class='marginTop0_3 marginBottom0_3 fontSize0_7' v-if='goodsSkuData && goodsSkuData.eachSidePrice && goodsSkuData.eachSidePrice.wapPromoPromotionPrice'>
                                <b>￥{{goodsSkuData.eachSidePrice.wapPromoPromotionPrice}}</b>&nbsp;&nbsp;
                                <!-- 如果原价小于售价，则隐藏原价 -->
                                <span class='gray919191' v-if='goodsSkuData.eachSidePrice.wapPromoPromotionPrice<goodsSkuData.marketPrice'>{{$t("marketPrice")}}： <s> {{goodsSkuData.marketPrice}}</s></span>
                            </p>
                            <p class='gray919191 fontSize0_7'>{{$t("stockNum")}}&nbsp;&nbsp;
                                <i>
                                    <span v-if='selectedSaleAttrTwo && selectedSaleAttrOne === null'>{{selectedSaleAttrTwo.stockNum}}</span>
                                    <span v-else-if='selectedSaleAttrOne && selectedSaleAttrTwo === null'>{{selectedSaleAttrOne.stockNum}}</span>
                                    <span v-else-if='selectedSaleAttrOne === null && selectedSaleAttrTwo === null'>{{goodsSkuData.stockNum}}</span>
                                    <span v-else>{{skuStockNum}}</span>
                                </i>
                                {{$t("pieces")}}
                            </p>
                        </div>
                        <div class='absolute top0_27 right0_27' v-on:click='closePopup()'>
                            <i class="iconfont close_icon">&#xe611;</i>
                        </div>
                    </div>
                    <!-- 价格区 end  -->
                    <!-- 规格颜色区 start  -->
                    <div class="height12_5 overflowScroll paddingLeftPer5 paddingRightPer5" v-if='goodsSkuData && goodsSkuData.status==1 && goodsSkuData.stockNum>0'>
                        <dl v-if='goodsSkuData && goodsSkuData.sizesList && goodsSkuData.sizesList.length'>
                            <dt class='fontSize0_7 marginBottom0_4'>{{$t("size")}}:  &nbsp;<span v-if='selectedSaleAttrTwo && selectedSaleAttrTwo.saleAttr2Value' id="sizeSelected">{{$t("selected")}}"{{selectedSaleAttrTwo.saleAttr2Value}}"</span></dt>
                            <dd v-on:click='selectedSaleAttr2(datas)' class="size height1_3 inlineBlock marginRight0_4 marginBottom0_4 marginLeft0 widthPer30" v-for='datas in goodsSkuData.saleAttrList.saleAttr2List'>
                                <a class='black fontSize0_65 borderRadius0_13 redBoder919191 inlineBlock textCenter textDecorationNone paddingTop0_3 paddingBottom0_3 widthPer100 aNotHigHlight paddingLeft0_3' v-bind:class="{redBoderc00:selectedSaleAttrTwo && selectedSaleAttrTwo.saleAttr2Value === datas.saleAttr2Value, grayccc:datas.isDisabled,grayBoderccc:datas.isDisabled}" v-bind:id="'size_'+ datas.saleAttr2ValueCode"  style="cursor:pointer" v-bind:goods_attr_sn='goodsSkuData.productSysCode' v-bind:s_code='datas.saleAttr2ValueCode' v-bind:a_type='goodsSkuData.activityType' v-bind:stock_num='datas.stockNum'>{{datas.saleAttr2Value}}</a> 
                            </dd>   
                        </dl>
                        <dl class="goods_detail_size_list color_images">
                            <dt class='fontSize0_7 marginBottom0_4'>{{$t("color")}}:  &nbsp;<span v-if='selectedSaleAttrOne && selectedSaleAttrOne.saleAttr1Value' id="colorSelected">{{$t("selected")}} "{{selectedSaleAttrOne.saleAttr1Value}}"</span></dt>
                            <dd v-on:click='selectedSaleAttr1(datass)' class='size height1_3 inlineBlock marginRight0_4 marginBottom0_4 marginLeft0 widthPer30' v-for='datass in goodsSkuData.saleAttrList.saleAttr1List'>
                                <a href="javascript:;" class='black fontSize0_65 borderRadius0_13 redBoder919191 inlineBlock textCenter textDecorationNone paddingTop0_3 paddingBottom0_3 paddingLeft0_3 paddingRight0_3 widthPer100 aNotHigHlight' v-bind:class="{redBoderc00:selectedSaleAttrOne && selectedSaleAttrOne.saleAttr1Value == datass.saleAttr1Value, grayccc: datass.isDisabled,grayBoderccc:datass.isDisabled}" v-bind:id="'color_'+datass.saleAttr1ValueCode" v-bind:goods_attr_sn='goodsSkuData.productSysCode' v-bind:c_code='datass.saleAttr1ValueCode' v-bind:a_type='goodsSkuData.activityType' v-bind:stock_num='datass.stockNum' v-bind:img_url='datass.imageUrl300'><span v-if='goodsSkuData.stockNum != 0'>{{datass.saleAttr1Value}}</span></a>
                            </dd>
                        </dl>
                    </div>
                    <!-- 规格颜色区 end  -->
                    <div class="Overlay_bottom textCenter fixed widthPer100">
                        <button class='white height1_8 lineHeight1_8 fontSize0_9 redBodere72e35 borderRadius0_13 redBackgroundf8584f marginBottom0_3 width13'>{{$t("sure")}}</button>
                    </div> 
                </div>
            </popup>
        </div>
    </div>
</template>

<script>
import '../../../style/normalize.css'
import '../../../style/base.css'
import './css/goods.scss'
import { TransferDom, Popup } from 'vux'
export default { 
    directives: {
        TransferDom
    },
    components: {
        Popup
    },    
    props: {
        // 从父组件传递过来的数据
        goodsSkuData: {
            default: function() {
                return []
            }
        },
        // 弹窗初始状态，初始状态关闭
        popupState: {
            default: function() { 
                return []
            }
        },
        // 规格列表的值
        selectedSaleAttrTwo: {
            default: function() { 
                return []
            }            
        },
        // 颜色列表的值
        selectedSaleAttrOne: {
            default: function() { 
                return []
            }            
        },
        // 同时点击规格和颜色时的综合库存
        skuStockNum: {
            default: function() { 
                return []
            }               
        }                               
    },           
    methods: { 
        // 关闭弹窗
        closePopup() {
            this.$emit('setPopupState')
        }, 
        // 规格后面的值显示与隐藏
        selectedSaleAttr2(data) {
            this.$emit('setSelectedSaleAttrTwo', data)
        },
        // 颜色后面的值显示与隐藏
        selectedSaleAttr1(data) {
            this.$emit('setSelectedSaleAttrOne', data)
        }            
    }   
}
</script>

